<template>
  <div>
    <div>
      <div class="mt-1em bradius-8px">
        <el-button class="w-100pp" size="large" type="primary" @click="toPublishArticle">我也发帖</el-button>
      </div>
      <div class="mt-1em pd-1em bg-gray1 bradius-8px flex-container flex-row-around">
        <div class="flex-container flex-col">
          <div>12345</div>
          <div class="txt-0_9em txt-gray-8">用户</div>
        </div>
        <div class="flex-container flex-col">
          <div>54321</div>
          <div class="txt-0_9em txt-gray-8">帖子</div>
        </div>
        <div class="flex-container flex-col">
          <div>67890</div>
          <div class="txt-gray-8 txt-0_9em">神评</div>
        </div>
      </div>
      <div class="mt-1em pd-1em bg-gray1 bradius-8px">
        <div>
          <span class="txt-volcano-4 txt-1_2em">
            <el-icon :size="18"><star-filled /></el-icon> 最 热 帖 子
          </span>
        </div>
        <div class="flex-container flex-row-between hand hot-note bradius-8px">
          <div class="flex-container">
            <span class="hot-note-seq txt-red-6">1</span>
            <div>
              <el-avatar :size="24" :icon="UserFilled"></el-avatar>
            </div>
            <div class="txt-0_9em txt-gray-7">朽木</div>
          </div>
          <div>
            <span class="txt-volcano-6">
              <el-icon :size="12"><star-filled /></el-icon>1290808132
            </span>
          </div>
        </div>
        <div class="flex-container flex-row-between hand hot-note bradius-8px">
          <div class="flex-container">
            <span class="hot-note-seq txt-red-5">2</span>
            <div>
              <el-avatar :size="24" :icon="UserFilled"></el-avatar>
            </div>
            <div class="txt-0_9em txt-gray-7">朽木</div>
          </div>
          <div>
            <span class="txt-volcano-6">
              <el-icon :size="12"><star-filled /></el-icon>1290808132
            </span>
          </div>
        </div>
        <div class="flex-container flex-row-between hand hot-note bradius-8px">
          <div class="flex-container">
            <span class="hot-note-seq txt-red-4">3</span>
            <div>
              <el-avatar :size="24" :icon="UserFilled"></el-avatar>
            </div>
            <div class="txt-0_9em txt-gray-7">朽木</div>
          </div>
          <div>
            <span class="txt-volcano-6">
              <el-icon :size="12"><star-filled /></el-icon>1290808132
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { UserFilled, Pointer, StarFilled } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()

// 跳转至发布文章页面
function toPublishArticle() {
  router.push('/publish-article')
}
</script>

<style lang="scss" scoped>
.hot-note {
  margin-top: 0.3em;
  padding: 0.2em 0.5em;
  &:hover {
    background-color: var(--volcano-1);
  }
  .hot-note-seq {
    padding: 0 0.6em;
    font-size: 1.3em;
  }
}
</style>
